<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>H+移动工作平台 - 预算分析</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="../css/styles.css">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <div class="device-container">
    <!-- 状态栏 -->
    <div class="status-bar">
      <div class="status-bar-left">
        <span class="time">9:41</span>
      </div>
      <div class="status-bar-right">
        <i class="fas fa-signal signal"></i>
        <i class="fas fa-wifi wifi"></i>
        <i class="fas fa-battery-full battery"></i>
      </div>
    </div>
    
    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-left">
        <a href="budget.html"><i class="fas fa-arrow-left"></i></a>
      </div>
      <div class="nav-title">预算分析</div>
      <div class="nav-right">
        <i class="fas fa-download"></i>
      </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="app-content">
      <!-- 筛选条件 -->
      <div class="p-4 bg-white">
        <div class="flex justify-between items-center mb-3">
          <div class="relative w-1/2">
            <select class="w-full bg-gray-100 border-0 rounded-lg py-2 pl-3 pr-8 text-sm appearance-none">
              <option>2024年度</option>
              <option>2023年度</option>
              <option>2022年度</option>
            </select>
            <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
              <i class="fas fa-chevron-down text-gray-400 text-xs"></i>
            </div>
          </div>
          <div class="relative w-1/2 ml-2">
            <select class="w-full bg-gray-100 border-0 rounded-lg py-2 pl-3 pr-8 text-sm appearance-none">
              <option>内科部门</option>
              <option>外科部门</option>
              <option>儿科部门</option>
              <option>妇产科部门</option>
              <option>急诊部门</option>
            </select>
            <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
              <i class="fas fa-chevron-down text-gray-400 text-xs"></i>
            </div>
          </div>
        </div>
        <div class="flex justify-between items-center">
          <div class="relative w-[48%]">
            <input type="date" class="w-full bg-gray-100 border-0 rounded-lg py-2 pl-3 pr-8 text-sm" value="2024-01-01">
          </div>
          <div class="text-gray-400">至</div>
          <div class="relative w-[48%]">
            <input type="date" class="w-full bg-gray-100 border-0 rounded-lg py-2 pl-3 pr-8 text-sm" value="2024-03-31">
          </div>
        </div>
      </div>
      
      <!-- 预算执行概览 -->
      <div class="p-4">
        <div class="card">
          <div class="card-header">
            <span>预算执行概览</span>
            <div class="text-xs text-gray-500">2024年Q1</div>
          </div>
          <div class="card-body">
            <div class="flex justify-between items-center mb-4">
              <div>
                <div class="text-sm text-gray-500">总预算</div>
                <div class="text-xl font-bold">¥1,200,000.00</div>
              </div>
              <div>
                <div class="text-sm text-gray-500">已使用</div>
                <div class="text-xl font-bold">¥320,560.50</div>
              </div>
              <div>
                <div class="text-sm text-gray-500">执行率</div>
                <div class="text-xl font-bold text-blue-500">27%</div>
              </div>
            </div>
            <canvas id="budgetOverviewChart" height="180"></canvas>
          </div>
        </div>
      </div>
      
      <!-- 预算分类分析 -->
      <div class="card mx-4 mb-4">
        <div class="card-header">
          <span>预算分类分析</span>
        </div>
        <div class="card-body">
          <canvas id="budgetCategoryChart" height="200"></canvas>
          <div class="grid grid-cols-2 gap-2 mt-4">
            <div class="flex items-center">
              <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
              <span class="text-xs">设备采购 (45%)</span>
            </div>
            <div class="flex items-center">
              <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
              <span class="text-xs">培训费用 (30%)</span>
            </div>
            <div class="flex items-center">
              <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
              <span class="text-xs">差旅费用 (15%)</span>
            </div>
            <div class="flex items-center">
              <div class="w-3 h-3 rounded-full bg-orange-500 mr-2"></div>
              <span class="text-xs">办公用品 (20%)</span>
            </div>
            <div class="flex items-center">
              <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
              <span class="text-xs">会议费用 (12%)</span>
            </div>
            <div class="flex items-center">
              <div class="w-3 h-3 rounded-full bg-gray-500 mr-2"></div>
              <span class="text-xs">其他费用 (12%)</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 月度预算执行趋势 -->
      <div class="card mx-4 mb-4">
        <div class="card-header">
          <span>月度预算执行趋势</span>
        </div>
        <div class="card-body">
          <canvas id="monthlyTrendChart" height="200"></canvas>
        </div>
      </div>
      
      <!-- 预算执行异常分析 -->
      <div class="card mx-4 mb-4">
        <div class="card-header">
          <span>预算执行异常分析</span>
        </div>
        <div class="card-body p-0">
          <div class="list-item">
            <div>
              <div class="flex items-center">
                <i class="fas fa-exclamation-triangle text-red-500 mr-2"></i>
                <span class="font-medium">培训费用超支风险</span>
              </div>
              <div class="text-xs text-gray-500 mt-1">当前执行率: 30%，预计Q2将超出年度预算</div>
              <div class="text-xs text-gray-500 mt-1">建议: 调整培训计划或申请预算调整</div>
            </div>
            <span class="tag tag-red">高风险</span>
          </div>
          
          <div class="list-item">
            <div>
              <div class="flex items-center">
                <i class="fas fa-exclamation-circle text-orange-500 mr-2"></i>
                <span class="font-medium">设备采购进度滞后</span>
              </div>
              <div class="text-xs text-gray-500 mt-1">计划执行率: 60%，实际执行率: 45%</div>
              <div class="text-xs text-gray-500 mt-1">建议: 加快采购流程或调整采购计划</div>
            </div>
            <span class="tag tag-orange">中风险</span>
          </div>
          
          <div class="list-item">
            <div>
              <div class="flex items-center">
                <i class="fas fa-info-circle text-blue-500 mr-2"></i>
                <span class="font-medium">差旅费用执行率低</span>
              </div>
              <div class="text-xs text-gray-500 mt-1">计划执行率: 25%，实际执行率: 15%</div>
              <div class="text-xs text-gray-500 mt-1">建议: 评估是否需要调整差旅计划</div>
            </div>
            <span class="tag tag-blue">低风险</span>
          </div>
        </div>
      </div>
      
      <!-- 预算优化建议 -->
      <div class="card mx-4 mb-4">
        <div class="card-header">
          <span>预算优化建议</span>
        </div>
        <div class="card-body p-0">
          <div class="list-item">
            <div>
              <div class="flex items-center">
                <i class="fas fa-lightbulb text-yellow-500 mr-2"></i>
                <span>培训费用预算调整</span>
              </div>
              <div class="text-xs text-gray-500 mt-1">建议从差旅费用调整30,000元至培训费用</div>
            </div>
            <button class="btn btn-sm btn-outline">申请调整</button>
          </div>
          
          <div class="list-item">
            <div>
              <div class="flex items-center">
                <i class="fas fa-lightbulb text-yellow-500 mr-2"></i>
                <span>设备采购计划优化</span>
              </div>
              <div class="text-xs text-gray-500 mt-1">建议将部分设备采购延期至Q3，缓解Q2资金压力</div>
            </div>
            <button class="btn btn-sm btn-outline">查看详情</button>
          </div>
          
          <div class="list-item">
            <div>
              <div class="flex items-center">
                <i class="fas fa-lightbulb text-yellow-500 mr-2"></i>
                <span>办公用品集中采购</span>
              </div>
              <div class="text-xs text-gray-500 mt-1">建议实施办公用品集中采购，预计节省15%成本</div>
            </div>
            <button class="btn btn-sm btn-outline">查看详情</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 预算概览图表
      const overviewCtx = document.getElementById('budgetOverviewChart').getContext('2d');
      const overviewChart = new Chart(overviewCtx, {
        type: 'doughnut',
        data: {
          labels: ['已使用', '剩余'],
          datasets: [{
            data: [320560.50, 879439.50],
            backgroundColor: ['rgba(59, 130, 246, 0.8)', 'rgba(229, 231, 235, 0.8)'],
            borderColor: ['rgba(59, 130, 246, 1)', 'rgba(229, 231, 235, 1)'],
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          cutout: '70%',
          plugins: {
            legend: {
              display: false
            }
          }
        }
      });
      
      // 预算分类分析图表
      const categoryCtx = document.getElementById('budgetCategoryChart').getContext('2d');
      const categoryChart = new Chart(categoryCtx, {
        type: 'pie',
        data: {
          labels: ['设备采购', '培训费用', '差旅费用', '办公用品', '会议费用', '其他费用'],
          datasets: [{
            data: [180000, 60000, 22500, 10000, 12000, 36060.50],
            backgroundColor: [
              'rgba(59, 130, 246, 0.8)',
              'rgba(16, 185, 129, 0.8)',
              'rgba(139, 92, 246, 0.8)',
              'rgba(249, 115, 22, 0.8)',
              'rgba(239, 68, 68, 0.8)',
              'rgba(156, 163, 175, 0.8)'
            ],
            borderColor: [
              'rgba(59, 130, 246, 1)',
              'rgba(16, 185, 129, 1)',
              'rgba(139, 92, 246, 1)',
              'rgba(249, 115, 22, 1)',
              'rgba(239,